<template>
  <div class="detail-view">
    <h1>详情页面</h1>
    <el-card v-if="category">
      <h2>索引: {{ category.id }}</h2>
      <h3>菜单分类: {{ category.name }}</h3>
      <el-button @click="goBack">返回</el-button>
    </el-card>
  </div>
</template>

<script>
import { getCategory } from "@/api/user";

export default {
  data() {
    return {
      category: null,
    };
  },
  methods: {
    goBack() {
      this.$router.push('/');
    },
    fetchCategory() {
      const id = this.$route.params.id;
      getCategory(id).then((res) => {
        this.category = res.data;
      }).catch(error => {
        this.$message.error('获取详情失败：' + error.message);
      });
    },
  },
  created() {
    this.fetchCategory();
  },
};
</script>

<style scoped>
.detail-view {
  padding: 20px;
}
</style> 